<template>
  <div class="box">
    <mt-header title="目录">
      <div slot="left">
        <mt-button @click = "tobefore" icon="back"></mt-button>
      </div>
    </mt-header>
    <div class="chapter">
      <ul>
        <h3>共{{ list.length }}章</h3>
        <router-link :to = "{ name: 'content', query: {link: item.link, index:index}}" tag="li" v-for = "(item, index) of list" :key = "index">
          {{ item.title }}
        </router-link>
      </ul>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Header, Indicator } from 'mint-ui'
Vue.use(Header, Indicator)
export default{
  data () {
    return {
      list: []
    }
  },
  mounted () {
    Indicator.open('加载中...')
    console.log(this.$route.query.id)
    this.$store.dispatch('getChapter', this.$route.query.id)
    fetch(`/xiaoliang/book-chapters/${this.$route.query.id}`)
      .then(res => res.json())
      .then((data) => {
        console.log(data)
        this.list = data.chapters
        Indicator.close()
      })
  },
  methods: {
    tobefore () {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
.chapter{
  @include rect(100%, auto)
  @include overflow()
  ul{
    @include overflow();
    @include background-color(#fbfbfb)
    li,h3{
      @include rect(100%, 0.4rem);
      white-space:nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 0.1rem;
      @include flexbox();
      @include align-items();
      @include border(0 0 0.02rem 0, #e0e0e0)
      @include text-color(#a9a9a9)
    }
  }
}
</style>
